<template>
    <div class="storeinformation">
        <div class="ba_f outmain">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>营业信息</span>
                </div>
            </div>
            <el-form ref="form2" :model="form2" label-width="180px">
<!--                <el-form-item label="营业时间" :required="true">-->
<!--                    <el-radio-group v-model="form2.timeType">-->
<!--                        <el-radio label="1" border>全天24小时营业</el-radio>-->
<!--                        <el-radio label="2" border>设置营业时间</el-radio>-->
<!--                    </el-radio-group>-->
<!--                    <div v-if="form2.timeType=='2'" class="mar_t10 zdy_tsinput">-->
<!--                        <div class="time_item mar_b10" v-for="(item,index) in form2.timeArr" :key="index">-->
<!--                            <el-time-select-->
<!--                                    v-model="item.startTime"-->
<!--                                    :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"-->
<!--                                    placeholder="选择时间"-->
<!--                                    @change="selectTime($event,item,index,1)">-->
<!--                            </el-time-select>-->
<!--                            <span class="mar_lr10">-</span>-->
<!--                            <span class="mar_r10" v-if="item.ciri">次日</span>-->
<!--                            <el-time-select-->
<!--                                    v-model="item.endTime"-->
<!--                                    :picker-options="{start: '00:00',step: '00:05',end: '23:55'}"-->
<!--                                    placeholder="选择时间"-->
<!--                                    @change="selectTime($event,item,index,2)"-->
<!--                            >-->
<!--                            </el-time-select>-->
<!--                            <el-button type="text" @click="deltimeInterval(index)" class="fon_12 mar_l10">删除-->
<!--                            </el-button>-->
<!--                        </div>-->
<!--                        <el-button v-show="form2.timeArr.length<3" type="text" @click="addtimeInterval">-->
<!--                            <Icon type="md-add"/>-->
<!--                            添加时段-->
<!--                        </el-button>-->
<!--                    </div>-->
<!--                </el-form-item>-->
                <el-form-item label="门店简介">
                    <el-input type="textarea" v-model="form2.introduction" placeholder="请输入门店简介"
                              style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="主营产品">
                    <el-input v-model="form2.mainDishes" style="width: 400px" placeholder="请输入主营产品"></el-input>
                </el-form-item>
                <el-form-item label="人均消费">
                    <el-input v-model="form2.perCapita" style="width: 400px" placeholder="请输入人均消费">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <!--                        <el-form-item label="店铺服务">-->
                <!--                            <el-checkbox-group v-model="form2.service">-->
                <!--                                <el-checkbox v-for="service in serviceList" :label="service.id" :key="service.id">-->
                <!--                                    {{service.name}}-->
                <!--                                </el-checkbox>-->
                <!--                            </el-checkbox-group>-->
                <!--                        </el-form-item>-->
                <el-form-item label="商家环境">
                    <div class="uploadSource bor_de rel flex" v-for="(item, index) in form2.environment"
                         :key="index">
                        <!--                                 <span @click="deleteMultiImage(item,2,'multigraph')" class="curs ab closeicon"-->
                        <!--                                       title="删除这张图片">-->
                        <!--                                      <i class="el-icon-circle-close fon_14 color_3"></i>-->
                        <!--                                </span>-->
                        <label class="statusLabel curs" @mouseenter="enterMultigraph(index,1)" @mouseleave="leaveMultigraph(index,1)">
                            <i class="el-icon-check" :ref="`list1${index}`"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(item,2,'multigraph')"></i>
                        </label>
                        <img :src="item" @click='test(2)' class="wid img"/>
                    </div>
                    <div class="uploadSource flex-center curs" @click='test(2)'>
                        <i class="el-icon-plus fon_40 color_d9"></i>
                    </div>
                </el-form-item>
            </el-form>
            <attachment-img ref="img2" type="imgs" :type2="storeId" @attachment='multigraph1'></attachment-img>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import {
        getStoreBusiness,
        postStoreBusiness,
        getStoreBasic
    } from "@/api/shop";
    import {mapMutations, mapState} from "vuex";

    export default {
        name: "storinformation",
        created() {
            // this.startLoading()
            // this.$baseColorfullLoading(1,'加载中');
            this.edit();
        },
        computed: {
            ...mapState(['storeId']),
        },
        components: {attachmentImg,},
        data() {
            return {
                loading: true,
                activeName: '1',
                form2: {
                    timeType: '1',
                    timeArr: [],
                    mainDishes: '',
                    perCapita: '',
                    introduction: '',
                    // service: [],
                    environment: [],
                    id: '',
                },
            }
        },
        methods: {
            ...mapMutations(['storeDataMutations']),
            handleClick() {
                this.edit()
            },
            async edit() {
                const {data} = await getStoreBusiness({id:this.storeId,});
                // this.serviceList = data.serviceList
                if (data.info.id) {
                    this.form2 = data.info
                    if (data.info.timeType == '2') {
                        this.form2.timeArr = data.info.timeArr.map(v => ({
                            startTime: v.startTime,
                            endTime: v.endTime,
                            ciri: v.ciri,
                        }))
                    }
                }
            },
            addtimeInterval() {
                let specObj = {startTime: '00:00', endTime: '00:00', ciri: true,}
                this.$set(this.form2.timeArr, this.form2.timeArr.length, specObj)
            },
            deltimeInterval(index) {
                this.$delete(this.form2.timeArr, index)
            },
            selectTime(value, item, index, type) {
                //value是点击返回的时间，item是开始和结束时间，idnex是所有，type是区别是点击开始时间还是结束时间
                //type=1是判断开始时间，2是判断结束时间、、加type为了判断两种情况先选开始时间和先选结束时间
                //如果结束时间小于开始时间就为次日
                // console.log('111',value,item,index,type)
                // console.log('122',value,item.endTime,item.startTime)
                for (let i = 0; i < this.form2.timeArr.length; i++) {
                    // console.log('index',i,index)
                    if (i == index) {
                        // console.log('当前选择数据')
                        if (type == 1) {
                            if (value >= item.endTime) {
                                // console.log('111111')
                                item.ciri = true
                            } else {
                                item.ciri = false
                            }
                        }
                        if (type == 2) {
                            // console.log('222222')
                            if (value <= item.startTime) {
                                item.ciri = true
                            } else {
                                item.ciri = false
                            }
                        }
                    }
                }
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            enterMultigraph(index,i=0){
                //多图删除，i是指文档中的第几个ref多图对象，index图片列表
                // console.log(this.$refs[`list${index}`][index],index)
                this.$refs[`list${i}${index}`][0].style.display = 'none';
            },
            leaveMultigraph(index,i=0){
                this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
            },
            multigraph1(url) {
                if (this.form2.environment && this.form2.environment.length > 0) {
                    this.form2.environment = this.form2.environment.concat(url.arr)
                } else {
                    this.form2.environment = url.arr
                }
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            async onSubmit() {
                // this.form2.storeId = this.storeId
                const {msg} = await postStoreBusiness(this.form2);
                this.getStoreBasic()
                this.$baseMessage(msg, "success");
                this.$router.go(-1)
            },
            async getStoreBasic() {
                const {data} = await getStoreBasic({id: this.storeId});
                this.storeDataMutations(data)
            },
        }
    }
</script>
<style scoped lang="scss">
    .storeinformation .el-form {
        margin-top: 20px;
    }
</style>
